<template>
    <div class="com_box">
        <div class="sch_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <div class="sch_tab active">广告复制</div>
                <div class="sch_tab" @click="switchTab('/copy_list')">任务列表</div>
            </div>
        </div>
        <div class="flexbox  flexjust">
            <div class="copy_bpx">
                <div class="box_title">选择创意</div>
                <div class="copy_step flexbox flexcenter flexjust">
                    <svg width="44" height="17" viewBox="0 0 44 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.97963 13.068C1.48363 13.068 0.208958 11.7453 0.155625 9.1L2.36363 9.02C2.40629 9.67067 2.56096 10.1827 2.82763 10.556C3.09429 10.9187 3.47296 11.1 3.96363 11.1C4.39029 11.1 4.71029 11.0307 4.92363 10.892C5.13696 10.7533 5.28096 10.476 5.35563 10.06C5.37696 9.97467 5.38763 9.84667 5.38763 9.676C5.38763 9.24933 5.25429 8.86533 4.98763 8.524C4.72096 8.18267 4.30496 7.76667 3.73962 7.276C3.27029 6.88133 2.88629 6.52933 2.58763 6.22C2.28896 5.9 2.03296 5.52667 1.81963 5.1C1.61696 4.66267 1.51562 4.17733 1.51562 3.644C1.51562 3.42 1.54229 3.148 1.59563 2.828C1.91563 1.164 3.14763 0.332 5.29163 0.332C6.32629 0.332 7.12629 0.630666 7.69163 1.228C8.26763 1.81467 8.55562 2.64133 8.55562 3.708C8.55562 3.88933 8.55029 4.028 8.53963 4.124L6.31563 4.204C6.32629 4.11867 6.33163 4.00133 6.33163 3.852C6.33163 2.81733 5.92629 2.3 5.11563 2.3C4.23029 2.3 3.78763 2.7 3.78763 3.5C3.78763 3.884 3.91563 4.236 4.17163 4.556C4.42763 4.86533 4.82229 5.244 5.35563 5.692C5.86763 6.14 6.27296 6.524 6.57163 6.844C6.87029 7.164 7.12629 7.55333 7.33963 8.012C7.56363 8.47067 7.67563 8.988 7.67563 9.564C7.67563 9.83067 7.65429 10.0867 7.61163 10.332C7.45163 11.2813 7.06229 11.9747 6.44363 12.412C5.82496 12.8493 5.00363 13.068 3.97963 13.068ZM12.2911 9.852C12.2591 10.0867 12.2431 10.2787 12.2431 10.428C12.2431 10.6093 12.2698 10.7373 12.3231 10.812C12.3765 10.8867 12.4671 10.924 12.5951 10.924C12.7445 10.924 12.9151 10.892 13.1071 10.828C13.3098 10.7533 13.5071 10.6573 13.6991 10.54L14.0991 12.524C13.2991 12.7907 12.6271 12.924 12.0831 12.924C11.4538 12.924 10.9525 12.7533 10.5791 12.412C10.2165 12.0707 10.0351 11.5213 10.0351 10.764C10.0351 10.54 10.0618 10.2413 10.1151 9.868L10.8191 5.276H9.76313L9.95513 3.356H11.1231L11.5231 0.78H13.7151L13.3151 3.356H15.0111L14.8191 5.276H13.0111L12.2911 9.852ZM17.8778 8.732C17.8671 8.84933 17.8618 9.02533 17.8618 9.26C17.8618 10.476 18.2564 11.084 19.0458 11.084C19.4191 11.084 19.7178 10.9773 19.9418 10.764C20.1658 10.54 20.3524 10.1667 20.5018 9.644L22.6938 9.964C22.4164 11.0093 22.0004 11.772 21.4458 12.252C20.9018 12.732 20.1178 12.972 19.0938 12.972C16.8004 12.972 15.6538 11.7613 15.6538 9.34C15.6538 8.93467 15.6858 8.508 15.7498 8.06C15.9311 6.556 16.3684 5.38267 17.0618 4.54C17.7551 3.69733 18.7364 3.276 20.0058 3.276C21.0298 3.276 21.7924 3.564 22.2938 4.14C22.7951 4.70533 23.0458 5.58 23.0458 6.764C23.0458 7.308 22.9871 7.964 22.8698 8.732H17.8778ZM19.8778 5.164C19.4618 5.164 19.1151 5.308 18.8378 5.596C18.5604 5.884 18.3364 6.34267 18.1658 6.972H20.7898C20.8004 6.86533 20.8058 6.716 20.8058 6.524C20.8058 6.076 20.7311 5.74 20.5818 5.516C20.4324 5.28133 20.1978 5.164 19.8778 5.164ZM29.4409 3.484C30.2835 3.484 30.9235 3.75067 31.3609 4.284C31.8089 4.80667 32.0329 5.65467 32.0329 6.828C32.0329 7.404 31.9902 7.98533 31.9049 8.572C31.6915 10.0973 31.2595 11.244 30.6089 12.012C29.9689 12.78 29.1582 13.164 28.1769 13.164C27.4515 13.164 26.9075 12.9507 26.5449 12.524L26.0329 16.108H23.8569L25.6329 3.644H27.7289L27.6809 4.204C28.1929 3.724 28.7795 3.484 29.4409 3.484ZM29.7129 8.396C29.7982 7.74533 29.8409 7.23867 29.8409 6.876C29.8409 6.35333 29.7662 5.98 29.6169 5.756C29.4675 5.52133 29.2275 5.404 28.8969 5.404C28.5129 5.404 28.1769 5.58 27.8889 5.932C27.6115 6.27333 27.4195 6.716 27.3129 7.26H27.2969L26.9929 9.356L26.9769 9.708C26.9769 10.732 27.2969 11.244 27.9369 11.244C28.4169 11.244 28.7955 11.0093 29.0729 10.54C29.3609 10.06 29.5742 9.34533 29.7129 8.396ZM41.2946 3.196C40.8893 3.30267 40.4946 3.356 40.1106 3.356C40.068 3.356 40.0306 3.356 39.9986 3.356L40.1266 1.404C40.8306 1.36133 41.4653 1.07867 42.0306 0.556L43.9186 0.636L42.1906 12.844H39.9506L41.2946 3.196Z" fill="#165DFF" />
                    </svg>
                </div>
                <div class="copy_title">选择广告账户</div>
                <div class="copy_text">广告创意将从所选账户中筛选</div>
                <el-select v-model="subForm.base_json.advertiser_id" @visible-change="(is)=>adverList = adverListCopy" filterable :filter-method="filterFn" placeholder="请选择" style="width:100%" class="big_input" popper-class="copy_select" @change="selectUser">
                    <el-option v-for="item in adverList" :key="item.advertiser_id" :label="item.advertiser_name" :value="item.advertiser_id">
                        <div class="user_name">{{item.advertiser_name}}</div>
                        <div class="user_id">账户ID：{{item.advertiser_id}}</div>
                    </el-option>
                </el-select>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="49" viewBox="0 0 20 49" fill="none" class="next_icon">
                    <path opacity="0.5" d="M10 7.5L10 39.5" stroke="url(#paint0_linear_11758_38802)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M10.866 46C10.4811 46.6667 9.51887 46.6667 9.13397 46L5.66987 40C5.28497 39.3333 5.7661 38.5 6.5359 38.5L13.4641 38.5C14.2339 38.5 14.715 39.3333 14.3301 40L10.866 46Z" fill="url(#paint1_linear_11758_38802)" />
                    <defs>
                        <linearGradient id="paint0_linear_11758_38802" x1="10.5" y1="7.5" x2="10.5" y2="39.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#165DFF" stop-opacity="0" />
                            <stop offset="1" stop-color="#165DFF" />
                        </linearGradient>
                        <linearGradient id="paint1_linear_11758_38802" x1="10" y1="47.5" x2="10" y2="35.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#A3BFFF" />
                            <stop offset="1" stop-color="#165DFF" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="copy_step flexbox flexcenter flexjust">
                    <svg width="46" height="17" viewBox="0 0 46 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.29994 13.068C1.80394 13.068 0.529271 11.7453 0.475938 9.1L2.68394 9.02C2.7266 9.67067 2.88127 10.1827 3.14794 10.556C3.4146 10.9187 3.79327 11.1 4.28394 11.1C4.7106 11.1 5.0306 11.0307 5.24394 10.892C5.45727 10.7533 5.60127 10.476 5.67594 10.06C5.69727 9.97467 5.70794 9.84667 5.70794 9.676C5.70794 9.24933 5.5746 8.86533 5.30794 8.524C5.04127 8.18267 4.62527 7.76667 4.05994 7.276C3.5906 6.88133 3.2066 6.52933 2.90794 6.22C2.60927 5.9 2.35327 5.52667 2.13994 5.1C1.93727 4.66267 1.83594 4.17733 1.83594 3.644C1.83594 3.42 1.8626 3.148 1.91594 2.828C2.23594 1.164 3.46794 0.332 5.61194 0.332C6.6466 0.332 7.4466 0.630666 8.01194 1.228C8.58794 1.81467 8.87594 2.64133 8.87594 3.708C8.87594 3.88933 8.8706 4.028 8.85994 4.124L6.63594 4.204C6.6466 4.11867 6.65194 4.00133 6.65194 3.852C6.65194 2.81733 6.2466 2.3 5.43594 2.3C4.5506 2.3 4.10794 2.7 4.10794 3.5C4.10794 3.884 4.23594 4.236 4.49194 4.556C4.74794 4.86533 5.1426 5.244 5.67594 5.692C6.18794 6.14 6.59327 6.524 6.89194 6.844C7.1906 7.164 7.4466 7.55333 7.65994 8.012C7.88394 8.47067 7.99594 8.988 7.99594 9.564C7.99594 9.83067 7.9746 10.0867 7.93194 10.332C7.77194 11.2813 7.3826 11.9747 6.76394 12.412C6.14527 12.8493 5.32394 13.068 4.29994 13.068ZM12.6114 9.852C12.5794 10.0867 12.5634 10.2787 12.5634 10.428C12.5634 10.6093 12.5901 10.7373 12.6434 10.812C12.6968 10.8867 12.7874 10.924 12.9154 10.924C13.0648 10.924 13.2354 10.892 13.4274 10.828C13.6301 10.7533 13.8274 10.6573 14.0194 10.54L14.4194 12.524C13.6194 12.7907 12.9474 12.924 12.4034 12.924C11.7741 12.924 11.2728 12.7533 10.8994 12.412C10.5368 12.0707 10.3554 11.5213 10.3554 10.764C10.3554 10.54 10.3821 10.2413 10.4354 9.868L11.1394 5.276H10.0834L10.2754 3.356H11.4434L11.8434 0.78H14.0354L13.6354 3.356H15.3314L15.1394 5.276H13.3314L12.6114 9.852ZM18.1981 8.732C18.1874 8.84933 18.1821 9.02533 18.1821 9.26C18.1821 10.476 18.5767 11.084 19.3661 11.084C19.7394 11.084 20.0381 10.9773 20.2621 10.764C20.4861 10.54 20.6727 10.1667 20.8221 9.644L23.0141 9.964C22.7367 11.0093 22.3207 11.772 21.7661 12.252C21.2221 12.732 20.4381 12.972 19.4141 12.972C17.1207 12.972 15.9741 11.7613 15.9741 9.34C15.9741 8.93467 16.0061 8.508 16.0701 8.06C16.2514 6.556 16.6887 5.38267 17.3821 4.54C18.0754 3.69733 19.0567 3.276 20.3261 3.276C21.3501 3.276 22.1127 3.564 22.6141 4.14C23.1154 4.70533 23.3661 5.58 23.3661 6.764C23.3661 7.308 23.3074 7.964 23.1901 8.732H18.1981ZM20.1981 5.164C19.7821 5.164 19.4354 5.308 19.1581 5.596C18.8807 5.884 18.6567 6.34267 18.4861 6.972H21.1101C21.1207 6.86533 21.1261 6.716 21.1261 6.524C21.1261 6.076 21.0514 5.74 20.9021 5.516C20.7527 5.28133 20.5181 5.164 20.1981 5.164ZM29.7612 3.484C30.6039 3.484 31.2439 3.75067 31.6812 4.284C32.1292 4.80667 32.3532 5.65467 32.3532 6.828C32.3532 7.404 32.3105 7.98533 32.2252 8.572C32.0119 10.0973 31.5799 11.244 30.9292 12.012C30.2892 12.78 29.4785 13.164 28.4972 13.164C27.7719 13.164 27.2279 12.9507 26.8652 12.524L26.3532 16.108H24.1772L25.9532 3.644H28.0492L28.0012 4.204C28.5132 3.724 29.0999 3.484 29.7612 3.484ZM30.0332 8.396C30.1185 7.74533 30.1612 7.23867 30.1612 6.876C30.1612 6.35333 30.0865 5.98 29.9372 5.756C29.7879 5.52133 29.5479 5.404 29.2172 5.404C28.8332 5.404 28.4972 5.58 28.2092 5.932C27.9319 6.27333 27.7399 6.716 27.6332 7.26H27.6172L27.3132 9.356L27.2972 9.708C27.2972 10.732 27.6172 11.244 28.2572 11.244C28.7372 11.244 29.1159 11.0093 29.3932 10.54C29.6812 10.06 29.8945 9.34533 30.0332 8.396ZM38.2709 12.924C38.4096 11.9107 38.6336 11.0413 38.9429 10.316C39.2629 9.58 39.6043 8.97733 39.9669 8.508C40.3296 8.03867 40.7883 7.52667 41.3429 6.972C41.8869 6.40667 42.2976 5.932 42.5749 5.548C42.8629 5.164 43.0763 4.70533 43.2149 4.172C43.2896 3.884 43.3269 3.62267 43.3269 3.388C43.3269 2.80133 43.0656 2.508 42.5429 2.508C42.1909 2.508 41.9029 2.64667 41.6789 2.924C41.4549 3.19067 41.2789 3.644 41.1509 4.284L39.0069 3.836C39.3696 1.61733 40.5536 0.507999 42.5589 0.507999C43.6256 0.507999 44.3989 0.753333 44.8789 1.244C45.3589 1.73467 45.5989 2.39067 45.5989 3.212C45.5989 3.54267 45.5669 3.884 45.5029 4.236C45.3963 4.812 45.2256 5.32933 44.9909 5.788C44.7563 6.236 44.5003 6.63067 44.2229 6.972C43.9563 7.30267 43.6043 7.68667 43.1669 8.124C42.6336 8.67867 42.2123 9.15867 41.9029 9.564C41.5936 9.96933 41.3376 10.4387 41.1349 10.972H44.6229L44.3189 12.924H38.2709Z" fill="#165DFF" />
                    </svg>
                </div>
                <div class="copy_title">搜索并选择创意</div>
                <div class="copy_text">选择所要复制的创意</div>
                <el-select v-model="s_name" :disabled="!subForm.base_json.advertiser_id" filterable remote reserve-keyword value-key="ad_id" placeholder="请输入广告 ID 搜索" style="width:100%" class="big_input aweme_el_select" popper-class="copy_select" :remote-method="remoteMethod" :loading="s_loading" @change="selectAdver">
                    <template slot="prefix">
                        <div class="aweme_icon" style="line-height:50px">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.0208 11.0782L14.4044 13.4612C14.665 13.7217 14.665 14.144 14.4045 14.4045C14.144 14.665 13.7217 14.665 13.4612 14.4044L11.0782 12.0208C10.016 12.8723 8.69483 13.3354 7.3335 13.3335C4.0215 13.3335 1.3335 10.6455 1.3335 7.3335C1.3335 4.0215 4.0215 1.3335 7.3335 1.3335C10.6455 1.3335 13.3335 4.0215 13.3335 7.3335C13.3354 8.69483 12.8723 10.016 12.0208 11.0782ZM10.6835 10.5835C11.5296 9.71342 12.0021 8.54712 12.0002 7.3335C12.0002 4.75483 9.9115 2.66683 7.3335 2.66683C4.75483 2.66683 2.66683 4.75483 2.66683 7.3335C2.66683 9.9115 4.75483 12.0002 7.3335 12.0002C8.54712 12.0021 9.71342 11.5296 10.5835 10.6835L10.6835 10.5835Z" fill="#616C85" />
                            </svg>
                        </div>
                    </template>
                    <el-option v-for="item in adverOption" :key="item.ad_id" :label="item.ad_name" :value="item">
                        <div class="">
                            <div class="user_name">{{item.ad_name}}</div>
                            <div class="user_id">广告ID：{{item.ad_id}}</div>
                        </div>
                    </el-option>
                </el-select>
                <!-- <div class="user_check flexbox flexcenter" v-if="JSON.stringify(subForm.creatives) !== '{}'">
                    <div class="user_info flex">
                        <div class="user_name">{{subForm.creatives.ad_name}}</div>
                        <div class="user_id">广告ID：{{subForm.creatives.ad_id}}</div>
                    </div>
                    <svg class="delete_icon" @click="deleteAdver" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.57031 8.14369L9.02746 5.57227H14.9703L15.4275 8.14369" stroke="#B4B7BD" stroke-width="1.37143" stroke-linejoin="round" />
                        <path d="M6 8.14258H18" stroke="#B4B7BD" stroke-width="1.44361" stroke-linecap="round" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2863 8.14258L15.6269 18.4283H8.37418L7.71484 8.14258H16.2863Z" stroke="#B4B7BD" stroke-width="1.37143" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M10.2852 15.4277H13.7137" stroke="#B4B7BD" stroke-width="1.37143" stroke-linecap="round" />
                    </svg>
                </div> -->
                <!-- <div class="flexbox flexcenter flexjust copy_null" v-else>
                    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 17.5C12.571 17.5 14.4461 16.6605 15.8033 15.3033C17.1605 13.9461 18 12.071 18 10C18 7.92895 17.1605 6.05395 15.8033 4.6967C14.4461 3.33947 12.571 2.5 10.5 2.5C8.42895 2.5 6.55395 3.33947 5.1967 4.6967C3.83947 6.05395 3 7.92895 3 10C3 12.071 3.83947 13.9461 5.1967 15.3033C6.55395 16.6605 8.42895 17.5 10.5 17.5Z" stroke="#B4B7BD" stroke-width="1.6" stroke-linejoin="round" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 5C11.0523 5 11.5 5.44772 11.5 6C11.5 6.55228 11.0523 7 10.5 7C9.94772 7 9.5 6.55228 9.5 6C9.5 5.44772 9.94772 5 10.5 5Z" fill="#B4B7BD" />
                        <path d="M10.6875 13.75V8.5H10.3125H9.9375" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9.375 13.75H12" stroke="#B4B7BD" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    请搜索并选择广告
                </div> -->
                <!-- <div class="flexbox flexcenter copy_footer">
                    <el-button class="set_btn" @click="resetData">重置</el-button>
                    <el-button type="primary" class="flex copy_btn" :disabled="JSON.stringify(subForm.creatives) == '{}' || !this.subForm.base_json.advertiser_id" @click="toCopy">复制广告</el-button>
                </div> -->
            </div>
            <div class="copy_bpx">
                <div class="box_title">已选创意/出价设置</div>
                <div v-if="subForm.creatives.length>0" style="height: 403px;overflow: auto;">
                    <div class="user_check flexbox flexcenter" v-for="(item,index) in subForm.creatives" :key="item.ad_id">
                        <div class="user_info flex">
                            <div class="user_name">{{item.ad_name}}</div>
                            <div class="user_id">广告ID：{{item.ad_id}}</div>
                        </div>
                        <div class="flexbox flexcenter input_USD" style="flex-basis: 148px;border-left: 1px solid #F8F8F9;">
                            <el-input
                                placeholder="出价金额"
                                v-model="item.bid_price">
                                <div style="height: 100%;display: flex;align-items: center;color:#616C85" slot="suffix" >USD</div>
                            </el-input>
                            <svg class="delete_icon" @click="deleteAdver(index)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.57031 8.14369L9.02746 5.57227H14.9703L15.4275 8.14369" stroke="#B4B7BD" stroke-width="1.37143" stroke-linejoin="round" />
                                <path d="M6 8.14258H18" stroke="#B4B7BD" stroke-width="1.44361" stroke-linecap="round" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2863 8.14258L15.6269 18.4283H8.37418L7.71484 8.14258H16.2863Z" stroke="#B4B7BD" stroke-width="1.37143" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M10.2852 15.4277H13.7137" stroke="#B4B7BD" stroke-width="1.37143" stroke-linecap="round" />
                            </svg>
                        </div>
                    </div>
                </div>
                 <div class="flexbox flexcenter flexjust"  style="min-height:403px" v-else>
                    <div >
                         <svg xmlns="http://www.w3.org/2000/svg" width="100" height="105" viewBox="0 0 100 105" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6309 34.2949C29.8328 34.2949 28.375 35.7518 28.375 37.5498V42.9757H28.42C28.3903 43.153 28.375 43.3342 28.375 43.5191V86.9278C28.375 88.7258 29.8328 90.1836 31.6309 90.1836H75.1286C76.6603 90.1836 77.9849 89.1159 78.3107 87.6198L87.7468 44.2102C88.1886 42.1811 86.6426 40.2632 84.5656 40.2632H60.3895C58.8914 40.2632 57.6761 39.0489 57.6761 37.5498C57.6761 35.7518 56.2182 34.2949 54.4202 34.2949H31.6309Z" fill="#4E9BEC"/>
                        <path d="M75.0388 43.3789H22.9485C21.0421 43.3789 19.4961 44.9249 19.4961 46.8313V86.9275C19.4961 88.8338 21.0421 90.3789 22.9485 90.3789H75.0388C76.9452 90.3789 78.4912 88.8338 78.4912 86.9275V46.8313C78.4912 44.9249 76.9452 43.3789 75.0388 43.3789Z" fill="#DBEDFF" stroke="url(#paint0_linear_16822_44943)" stroke-width="0.392585"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M31.6309 34.2949C29.8328 34.2949 28.375 35.7527 28.375 37.5508V42.9766H28.42C28.3903 43.154 28.375 43.3351 28.375 43.5201V86.9287C28.375 88.7268 29.8328 90.1846 31.6309 90.1846H75.1286C76.6603 90.1846 77.9849 89.1169 78.3107 87.6198L87.7468 44.2111C88.1886 42.1821 86.6426 40.2642 84.5656 40.2642H60.3895C58.8914 40.2642 57.6761 39.0498 57.6761 37.5508C57.6761 35.7527 56.2182 34.2949 54.4202 34.2949H31.6309Z" fill="#7BBBFF"/>
                        <path d="M13.6346 50.2266H66.0147C67.3963 50.2266 68.6064 51.1607 68.9676 52.5054L78.0562 86.4123C78.5823 88.3724 77.1173 90.3005 75.1043 90.3005H22.7233C21.3417 90.3005 20.1316 89.3664 19.7704 88.0217L10.6817 54.1148C10.1567 52.1547 11.6207 50.2266 13.6346 50.2266Z" fill="#EAF4FF" stroke="url(#paint1_linear_16822_44943)" stroke-width="0.392585"/>
                        <path d="M34.3457 37.5474C34.3457 38.4464 33.6163 39.1758 32.7173 39.1758C31.8183 39.1758 31.0898 38.4464 31.0898 37.5474C31.0898 36.6493 31.8183 35.9199 32.7173 35.9199C33.6163 35.9199 34.3457 36.6493 34.3457 37.5474Z" fill="#EC5353"/>
                        <path d="M39.7715 37.5474C39.7715 38.4464 39.0431 39.1758 38.144 39.1758C37.245 39.1758 36.5156 38.4464 36.5156 37.5474C36.5156 36.6493 37.245 35.9199 38.144 35.9199C39.0431 35.9199 39.7715 36.6493 39.7715 37.5474Z" fill="#F2DD1D"/>
                        <path d="M45.1963 37.5474C45.1963 38.4464 44.4679 39.1758 43.5689 39.1758C42.6698 39.1758 41.9414 38.4464 41.9414 37.5474C41.9414 36.6493 42.6698 35.9199 43.5689 35.9199C44.4679 35.9199 45.1963 36.6493 45.1963 37.5474Z" fill="#38DF5D"/>
                        <path d="M34.0111 63.773C33.9009 63.1117 34.4117 62.5098 35.0817 62.5098H40.4778C41.0088 62.5098 41.4612 62.8932 41.5484 63.4165L42.2721 67.7573C42.3823 68.4187 41.8724 69.0206 41.2015 69.0206H35.8053C35.2744 69.0206 34.822 68.6372 34.7347 68.1139L34.0111 63.773Z" fill="white"/>
                        <path d="M35.64 72.4537C35.5298 71.7914 36.0397 71.1895 36.7106 71.1895H42.1068C42.6368 71.1895 43.0901 71.5728 43.1764 72.0962L43.9 76.437C44.0103 77.0984 43.5004 77.7012 42.8294 77.7012H37.4333C36.9033 77.7012 36.4499 77.3178 36.3637 76.7945L35.64 72.4537Z" fill="white"/>
                        <path d="M44.8627 63.773C44.7525 63.1117 45.2624 62.5098 45.9333 62.5098H51.3294C51.8594 62.5098 52.3128 62.8932 52.4 63.4165L53.1237 67.7573C53.2329 68.4187 52.723 69.0206 52.0531 69.0206H46.6569C46.1259 69.0206 45.6735 68.6372 45.5863 68.1139L44.8627 63.773Z" fill="#2D8CF0"/>
                        <path d="M46.4916 72.4537C46.3814 71.7914 46.8913 71.1895 47.5622 71.1895H52.9583C53.4893 71.1895 53.9417 71.5728 54.0289 72.0962L54.7526 76.437C54.8628 77.0984 54.3529 77.7012 53.682 77.7012H48.2858C47.7548 77.7012 47.3025 77.3178 47.2152 76.7945L46.4916 72.4537Z" fill="white"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M86.8723 18.1562C86.8723 18.1562 87.5576 19.6629 87.9429 20.9799C88.4777 22.8067 88.0503 24.8837 87.9563 24.9038C87.4436 25.0159 85.703 22.5671 85.7308 21.1303C85.7548 19.8383 86.8723 18.1562 86.8723 18.1562Z" fill="#FFB883"/>
                        <g filter="url(#filter0_d_16822_44943)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.5273 23.0395C62.5273 23.0395 72.6976 20.628 76.24 12.5664C77.7314 12.8971 80.3556 14.2063 86.7351 18.02C87.6265 18.552 85.7403 21.1159 85.7403 21.1159C85.7403 21.1159 88.7105 23.7114 87.9802 24.7484C83.763 30.7436 80.3911 32.9212 76.5103 33.0631C70.4912 31.5889 62.5273 23.0395 62.5273 23.0395Z" fill="#FFE089"/>
                        </g>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.6532 39.5078C43.596 43.4509 41.9541 48.5892 39.2148 52.7317C42.8014 53.4553 49.0985 54.0659 54.047 54.0917C54.2818 54.0927 54.9317 53.8032 55.1521 53.7764C56.4882 53.6096 56.9233 52.471 57.3221 52.0464C58.6735 49.3474 60.1706 47.2397 60.2703 44.0039C60.322 42.3449 60.2195 40.9762 60.0633 40.4231C57.9939 39.4187 54.1543 40.6388 41.6532 39.5078Z" fill="#A8E5FF"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M55.1538 50.9528C56.0634 51.755 55.381 54.0601 53.6797 54.109C55.4864 54.039 56.4257 53.3317 57.0918 52.6358C57.7589 51.941 60.8911 48.711 60.0534 40.4395C60.4732 47.4477 58.9301 50.9595 55.1538 50.9528Z" fill="#7CC3E1"/>
                        <defs>
                            <filter id="filter0_d_16822_44943" x="62.5273" y="12.5664" width="25.5703" height="38.9449" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset dy="18.4488"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0.173316 0 0 0 0 0.377447 0 0 0 0 0.620833 0 0 0 0.272192 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16822_44943"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16822_44943" result="shape"/>
                            </filter>
                            <linearGradient id="paint0_linear_16822_44943" x1="48.8203" y1="46.3827" x2="71.9829" y2="95.4558" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white"/>
                            <stop offset="1" stop-color="white" stop-opacity="0"/>
                            </linearGradient>
                            <linearGradient id="paint1_linear_16822_44943" x1="33.6971" y1="50.112" x2="29.3097" y2="88.6826" gradientUnits="userSpaceOnUse">
                            <stop stop-color="white"/>
                            <stop offset="1" stop-color="white" stop-opacity="0"/>
                            </linearGradient>
                        </defs>
                    </svg>
                    <div style="color: #ACB2BB;font-size: 12px;">暂无数据，请先添加</div>
                    </div>
                   
                </div>
                <div class="flexbox flexcenter copy_footer">
                    <el-button type="primary" class="flex copy_btn" :disabled="subForm.creatives.length == 0 || !this.subForm.base_json.advertiser_id" @click="toCopy">复制广告</el-button>
                </div>
            </div>
        </div>
        <CopyNum ref="copy_num" :subForm="subForm" :adverList="adverList" />
    </div>
</template>

<script>
import CopyNum from "./model/CopyNum";
export default {
    components: {
        CopyNum,
    },
    name: "",
    data() {
        return {
            s_name: "",
            adverList: [],
            adverListCopy:[],
            adverOption: [],
            s_loading: false,
            subForm: {
                name: "",
                // campaign_num: 1,
                adgroup_num: 1,
                // creatives_num: 1,
                advertiser_ids: [],
                creatives: [],
                base_json: {
                    advertiser_id: "",
                    operation_status: "ENABLE",
                    create_time: "",
                },
            },
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        searchAdvertiser(keyword,SearchArr) {
            // 创建一个正则表达式，忽略大小写，并匹配包含关键字的内容
            const regex = new RegExp(keyword, 'i');
            // 用于存储匹配结果的数组
            const matches = [];

            // 遍历数组对象
            for (let i = 0; i < SearchArr.length; i++) {
                const advertiser = SearchArr[i];
                // 检查 advertiser_id 或 advertiser_name 是否匹配关键字
                if (regex.test(advertiser.advertiser_id) || regex.test(advertiser.advertiser_name)) {
                    // 如果找到匹配的对象，则将其添加到匹配结果数组中
                    matches.push(advertiser);
                }
            }
            // 返回匹配结果数组
            return matches;
        },
        filterFn(serach){
          this.adverList = this.searchAdvertiser(serach,this.adverListCopy)
        },
        //获取广告账户列表
        async getUserList() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/advertiserList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.adverList = res.data.list;
                this.adverListCopy = res.data.list;
            }
        },

        selectUser() {
            this.subForm.creatives = [];
            this.adverOption = [];
        },

        remoteMethod(query) {
            if (query !== "") {
                this.getAdverList(query);
            } else {
                this.Adverption = [];
            }
        },

        // 获取广告
        async getAdverList(report_name) {
            this.s_loading = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokLaunch/adGet",
                {
                    advertiser_id: this.subForm.base_json.advertiser_id,
                    ad_id: report_name,
                }
            );
            if (res.code !== 200) {
                this.s_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.s_loading = false;
                this.adverOption =  res.data.map(e=> {
                    e.bid_price = "" 
                      return e
                   });
            }
        },

        // 选择广告
        selectAdver(item) {
            this.s_name = "";
            if(this.subForm.creatives.length > 0){
               !this.subForm.creatives.find(e=>e.ad_id == item.ad_id ) ? this.subForm.creatives.push(item) : undefined;
            }else{
                this.subForm.creatives.push(item)
            }
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 删除广告
        deleteAdver(index) {
             this.subForm.creatives.splice(index,1)
            // this.subForm.creatives = [];
        },

        toCopy() {
            for (let index = 0; index <  this.subForm.creatives.length; index++) {
                 if(this.subForm.creatives[index].bid_price.trim() == ""){
                    return this.$message.error('请填写出价金额')
                }
            }
            this.$refs.copy_num.getData();
        },

        resetData() {
            this.subForm.base_json.advertiser_id = "";
            this.subForm.creatives = [];
        },
    },
};
</script>


<style scoped>
.input_USD  /deep/ .el-input__inner{
    border: none;
}
.com_box {
    padding-bottom: 100px;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.copy_bpx {
    width: 400px;
    box-sizing: border-box;
    background: rgba(165, 177, 209, 0.1);
    padding: 32px 20px;
    border-radius: 8px;
    margin: 60px 0;
}
.copy_bpx:nth-child(1){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.copy_bpx:nth-child(2){
    border-left: 1px solid #E8EAEC;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.box_title{
    margin-bottom: 20px;
    color: #17233D;
    font-size: 18px;
    font-weight: 500;
}
.copy_step {
    width: 71px;
    height: 32px;
    background: rgba(165, 177, 209, 0.1);
    border-radius: 8px;
    margin: 0 auto;
}
.copy_title {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    margin-top: 16px;
}
.copy_text {
    font-size: 14px;
    color: #b4b7bd;
    line-height: 20px;
    margin-top: 8px;
    text-align: center;
    margin-bottom: 20px;
}
.next_icon {
    display: block;
    margin: 20px auto;
}
.user_check {
    padding: 12px;
    background: #fff;
    border-radius: 4px;
    margin-top: 8px;
}
.user_info {
    min-width: 0;
}
.user_name {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user_id {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.delete_icon {
    cursor: pointer;
}
.copy_null {
    font-size: 14px;
    color: #b4b7bd;
    margin-top: 20px;
}
/deep/ .big_input .el-input__inner {
    height: 48px;
    line-height: 48px;
    padding-left: 15px;
}
/deep/ .aweme_el_select .el-input__prefix {
    left: unset;
    right: 10px;
}
/deep/ .big_input .el-input.is-disabled .el-input__inner {
    background-color: #fff;
}
.set_btn.el-button {
    width: 100px;
    border-color: #fff;
}
.set_btn.el-button:focus,
.set_btn.el-button:hover {
    color: #4475ff;
    border-color: #ecf1ff;
    background-color: #ecf1ff;
}
.set_btn,
.copy_btn {
    height: 48px;
}
.copy_footer {
    margin-top: 20px;
}
</style>
<style>
.copy_select .el-select-dropdown__item {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>



